<!--
  Copyright 2017-2019 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<div class="gt-header clearfix"
     style="padding-bottom: 45px;">
  <div class="gt-header-lhs float-left">
    <div class="gt-header-lhs">
      <div class="gt-header-menu">
        <select gt-selectpicker
                gt-title="agentRollup.topLevelDisplay || '&amp;lt;select&amp;gt;'"
                data-width="fit"
                data-live-search="true"
                data-style="btn-secondary"
                id="topLevelAgentRollupDropdown"
                aria-label="Agent">
          <option ng-repeat="item in topLevelAgentRollups track by item.id"
                  data-href="{{agentRollupUrl(item.id)}}"
                  data-tokens="{{item.display}}"
                  value="{{item.id}}"
                  ng-disabled="item.disabled"
                  ng-selected="item.id == agentRollup.topLevelId">
            {{item.display}}
          </option>
          <option disabled
                  class="gt-top-level-agent-rollup-dropdown-message d-none"
                  style="font-style: italic; font-size: 1rem; cursor: inherit;"
                  ng-if="topLevelAgentRollups.length === 0">
            No active agents in this time period
          </option>
          <!-- can't use gt-spinner due to selectpicker behavior -->
          <option disabled
                  class="gt-top-level-agent-rollup-dropdown-spinner d-none"
                  style="position: relative; height: 30px; cursor: inherit;">
          </option>
        </select>
        <!-- ng-show needed here instead of ng-if because transaction.js binds directly to #childAgentRollupDropdown -->
        <!-- also important, ng-show is not on select directly, so that it will apply right away to the selectpicker
             which is added as a sibling of select, instead of having to wait for selectpicker('refresh') which can
             cause a slight jitter -->
        <span ng-show="showChildAgentRollupDropdown()">
          <select gt-selectpicker
                  gt-title="agentRollup.childDisplay"
                  data-width="fit"
                  data-live-search="true"
                  data-style="btn-secondary"
                  id="childAgentRollupDropdown"
                  aria-label="Child agent">
            <option data-href="{{agentRollupUrl(agentRollup.topLevelId)}}"
                    data-tokens="Rollup"
                    value="{{agentRollup.topLevelId}}"
                    ng-selected="agentRollup.topLevelId == agentRollup.id">
              Rollup
            </option>
            <option data-divider="true">
            </option>
            <option ng-repeat="item in childAgentRollups track by item.id"
                    data-href="{{agentRollupUrl(item.id)}}"
                    data-tokens="{{item.display}}"
                    value="{{item.id}}"
                    title="{{item.display}}"
                    ng-disabled="item.disabled"
                    ng-selected="item.id == agentRollup.id">
              {{item.indentedDisplay}}
            </option>
            <option disabled
                    class="gt-child-agent-rollup-dropdown-message d-none"
                    style="font-style: italic; font-size: 1rem; cursor: inherit;"
                    ng-if="childAgentRollups.length === 0">
              No active agents in this time period
            </option>
            <!-- can't use gt-spinner due to selectpicker behavior -->
            <option disabled
                    class="gt-child-agent-rollup-dropdown-spinner d-none"
                    style="position: relative; height: 30px; cursor: inherit;">
            </option>
          </select>
        </span>
      </div>
      <!-- don't use border to simulate vertical bar since this will jitter on reload (at least in Chrome)
           while chrome guesses the placement of the border based on default font and then it moves slightly
           once font is available -->
      <div class="gt-header-text gt-separator">
        |
      </div>
      <h1 class="gt-header-text">
        Synthetic monitors
      </h1>
    </div>
  </div>
  <div class="gt-header-rhs float-right">
    <div ng-controller="ChartRangeCtrl" ng-include="'template/gt-chart-range.html'"></div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <h2>Synthetic monitors</h2>
  </div>
  <div class="card-body">
    <div ng-hide="hideMainContent()">
      <div ng-include src="'template/gt-loading-overlay.html'"></div>
      <div ng-include src="'template/gt-http-error-overlay.html'"></div>
      <!-- ng-show needed here instead of ng-if because synthetic-monitor.js binds directly to #chart -->
      <div ng-show="loaded">
        <div ng-show="displayNoSyntheticMonitorsConfigured" style="font-size: 1rem; margin-top: 20px;">
          No synthetic monitors configured.
          See <a href="config/synthetic-monitor-list{{agentQueryString()}}">Synthetic monitor configuration</a>.
        </div>
        <!-- ng-show needed here instead of ng-if because synthetic-monitor.js binds directly to #chart -->
        <div ng-hide="displayNoSyntheticMonitorsConfigured">
          <div class="gt-chart-controls float-right">
            <button class="gt-chart-button"
                    ng-click="zoomOut()">
              <span title="Zoom out"
                    class="fas fa-search-minus">
              </span>
            </button>
            <button class="gt-chart-button"
                    ng-click="refresh()">
              <span title="Refresh"
                    class="fas fa-sync">
              </span>
            </button>
            <button class="gt-chart-button"
                    uib-popover-template="'template/help/chart.html'"
                    popover-placement="left"
                    popover-trigger="'outsideClick'">
              <span title="Help"
                    class="fas fa-question-circle">
              </span>
            </button>
          </div>
          <div class="gt-chart-container">
            <div gt-spinner
                 gt-show="showChartSpinner"
                 gt-no-delay="true"
                 class="gt-panel-overlay gt-chart-panel"
                 id="chartSpinner">
            </div>
            <div class="gt-chart-dimensions" id="chart"></div>
            <div ng-if="chartNoData && !showChartSpinner"
                 class="gt-chart-panel"
                 style="display: table;">
              <div style="display: table-cell; text-align: center; vertical-align: middle;">
                <div ng-if="allSyntheticMonitors.length && syntheticMonitorIds.length" class="gt-chart-no-data">
                  No data
                </div>
                <div ng-if="allSyntheticMonitors.length && !syntheticMonitorIds.length" class="gt-chart-no-data">
                  Select one or more synthetic monitors below
                </div>
                <div ng-if="!allSyntheticMonitors.length" class="gt-chart-no-data">
                  No synthetic monitors captured in this time period
                </div>
              </div>
            </div>
          </div>
          <div class="gt-everything-below-gauge-chart">
            <div class="legend" id="chartLegend"
                 style="text-align: center; margin-top: 10px; width: 100%;">
              <div class="d-inline-block">
                <div class="d-inline-block" ng-repeat="seriesLabel in seriesLabels"
                     style="white-space: nowrap; margin: 0 6px;">
                  <div class="legendColorBox d-inline-block"
                       style="border: 1px solid rgb(204, 204, 204); padding: 1px;">
                    <div style="width: 4px; height: 0px; border: 5px solid rgb(237, 194, 64); overflow: hidden;"
                         ng-style="{'border': '5px solid ' + seriesLabel.color}">
                    </div>
                  </div>
                  <div class="legendLabel d-inline-block">{{seriesLabel.text}}</div>
                </div>
              </div>
            </div>
            <br>
            <div class="pl-5">
              <label ng-class="{'gt-bold': syntheticMonitorIds.indexOf(syntheticMonitor.id) !== -1}"
                     class="custom-control custom-checkbox"
                     ng-repeat="syntheticMonitor in allSyntheticMonitors"
                     style="cursor: pointer;">
                <input type="checkbox"
                       class="custom-control-input"
                       ng-checked="syntheticMonitorIds.indexOf(syntheticMonitor.id) !== -1"
                       ng-click="clickSyntheticMonitor(syntheticMonitor.id)">
                <div class="custom-control-label">
                  {{syntheticMonitor.display}}
                </div>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
